<template>
  <div class="app-container">
    <div class="title">
      <div class="item">1</div>
      <div ref="chartDom" class="item">1</div>
      <div class="item">3</div>
    </div>
  </div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/legend')
require('echarts/lib/chart/pie')
export default {
  mounted() {
    window.onresize = function() {
      myChart.resize()
    }
    var myChart = echarts.init(this.$refs.chartDom)

    myChart.setOption({
      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 150],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: 'rose 1' },
            { value: 38, name: 'rose 2' },
            { value: 32, name: 'rose 3' },
            { value: 30, name: 'rose 4' },
            { value: 28, name: 'rose 5' },
            { value: 26, name: 'rose 6' },
            { value: 22, name: 'rose 7' },
            { value: 18, name: 'rose 8' }
          ]
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
.title{
  width: 100%;
  display: flex;
  justify-content: space-between;
  .item{
    flex: 0 0 32%;
    height: 500px;
  }
}
</style>
